<template>
  <vue-draggable-resizable
    class="region-search"
    v-if="visible"
    :resizable="false"
    :x="0"
    :y="0"
    :w="580"
    :h="400"
    :z="2001">
    <el-card :body-style="{padding: '20px 10px'}" shadow="always" class="search-card">
      <div slot="header" class="search-header">
        <span>高级搜索</span>
        <div style="float:right; padding:3px 0">
          <el-button
            v-if="bodyVisible"
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-upload2"
          >折叠</el-button>

          <el-button
            v-else
            style="padding:0"
            type="text"
            @click="toggleBody()"
            icon="el-icon-download"
          >展开</el-button>
          <el-button style="padding:0" type="text" @click="close()">关闭搜索</el-button>
        </div>
      </div>

      <div class="search-body" v-if="bodyVisible">
        <el-form :model="searchForm" ref="searchForm" label-width="100px">
          <el-form-item label="巡检设备"  prop="deviceName">
            <el-input v-model="searchForm.deviceName" placeholder="设备名称" clearable />
          </el-form-item>

          <el-form-item label="区域" prop="areaId">
            <el-select
              filterable
              v-model="searchForm.areaId"
              placeholder="请选择区域"
              clearable
              style="width:100%"
            >
              <el-option
                v-for="item in areaList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="设备负责人" prop="deviceUserName">
            <el-input v-model="searchForm.deviceUserName" clearable placeholder="设备负责人" />
          </el-form-item>
          <el-form-item label="区域负责人" prop="areaUserName">
            <el-input v-model="searchForm.areaUserName" clearable placeholder="区域负责人" />
          </el-form-item>

          <el-form-item label="设备状态" v-if="atorlStatus !== 1" prop="deviceStatus">
<!--            <el-input v-model="searchForm.deviceUserName" clearable placeholder="设备状态" />-->
            <el-select v-model="searchForm.deviceStatus" filterable placeholder="请选择">
              <el-option
                v-for="item in deveiceStatusList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="审核状态" v-if="atorlStatus !== 1" prop="auditStatus">
<!--            <el-input v-model="searchForm.auditStatus" clearable placeholder="审核状态" />-->
            <el-select v-model="searchForm.auditStatus" filterable placeholder="请选择">
              <el-option
                v-for="item in auditStatusList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="情况说明" v-if="atorlStatus !== 1" prop="comment">
            <el-select v-model="searchForm.situationStatus" filterable placeholder="请选择">
              <el-option
                v-for="item in deveiceList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <template>
              <el-date-picker
                v-model="searchForm.startTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="开始时间"
              />至
              <el-date-picker
                v-model="searchForm.endTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="结束时间"
              />
            </template>
          </el-form-item>
          <el-form-item>
            <el-button @click="doSearch()" type="primary">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </vue-draggable-resizable>
</template>

<script>
  import VueDraggableResizable from 'vue-draggable-resizable'
  export default {
    name: 'RegionSearch',
    components: {
      VueDraggableResizable
    },
    data () {
      return {
        visible: false,
        bodyVisible: true,
        searchForm: {
          deviceName: '',
          areaId: '',
          areaUserName: '',
          startTime: '',
          endTime: '',
          deviceUserName: '',
          dataTime: [],
          deviceStatus: '',
          auditStatus: '',
          situationStatus: '',
          comment: ''
        },
        areaList: [],
        deveiceStatusList: [
          {
            key: 1,
            value: '在用'
          },
          {
            key: 2,
            value: '闲置'
          },
          {
            key: 3,
            value: '待修'
          },
          {
            key: 4,
            value: '借入'
          },
          {
            key: 5,
            value: '借出'
          },
          {
            key: 6,
            value: '报废'
          },
          {
            key: 7,
            value: '其他'
          }
        ],
        auditStatusList: [
          {
            key: 0,
            value: '未提交审核'
          },
          {
            key: 1,
            value: '正在审核'
          },
          {
            key: 2,
            value: '通过审核'
          },
          {
            key: 3,
            value: '驳回提交'
          }
        ],
        deveiceList: [
          {
            key: 1,
            value: '设备良好'
          },
          {
            key: 2,
            value: '存在隐患'
          },
          {
            key: 10,
            value: '其他情况'
          }
        ],
        atorlStatus: ''
      }
    },
    methods: {
      async doSearch () {
        this.$emit('onSearched', this.searchForm)
      },
      open (atorlStatus) {
        this.atorlStatus = atorlStatus
        this.$store.dispatch('user/loadDeptList')
        this.visible = true
        this.searchForm = {
          deviceName: '',
          areaName: '',
          areaUserName: '',
          startTime: '',
          situationStatus: '',
          endTime: '',
          areaId: '',
          deviceUserName: '',
          dataTime: [],
          deviceStatus: '',
          auditStatus: '',
          comment: ''
        }
        // this.$nextTick(() => this.$refs.searchForm.resetFields())
        this.$nextTick(() => {
          this.$refs['searchForm'].resetFields()
        })
        this.getAreaList()
      },
      async getAreaList() {
        var res = await this.$http.post('device/area/list')
        this.areaList = res.data
      },
      close () {
        // this.$emit('onCancel')
        this.searchForm = {}
        this.$emit('onSearched', this.searchForm)
        this.visible = false
      },
      toggleBody () {
        this.bodyVisible = !this.bodyVisible
      }
    },
    watch: {
      // 'deptIds' (val) {
      //   if (val && val.length > 0) {
      //     this.searchForm.deptId = val[val.length - 1]
      //   } else {
      //     this.searchForm.deptId = null
      //   }
      // }
    }
  }
</script>

<style lang="less">
  .region-search {
    position: absolute;
    border: none;

    .search-card {
      .search-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>
